@if (type === "User") {
    <div class="row mt-3">
        <div class="col">
            <div class="bubble bubble-left"><span inline="false" optional="false" [sqxMarkdown]="snapshot.content"></span></div>
        </div>

        <div class="col-auto"><img class="user-picture" [src]="user.id | sqxUserIdPicture" title="{{ user.displayName }}" /></div>
    </div>
}

@if (type === "System") {
    <div class="row mt-3">
        <div class="col-auto">
            <div class="squid squid-sm d-flex align-items-center justify-content-center"><img src="./images/squid.svg" /></div>
        </div>

        <div class="col">
            <div class="bubble bubble-right">{{ content | sqxTranslate }}</div>
        </div>
    </div>
}

@if (type === "Bot") {
    <div class="row mt-3">
        <div class="col-auto">
            <div class="squid squid-sm d-flex align-items-center justify-content-center"><img src="./images/squid.svg" /></div>
        </div>

        <div class="col">
            <div class="bubble bubble-right use-container">
                <div class="content" (sqxResized)="scrollIntoView()">
                    @if (snapshot.runningTools.length > 0) {
                        <div class="mb-2">
                            @for (tool of snapshot.runningTools; track tool) {
                                <div class="badge badge-secondary me-1">{{ tool }}</div>
                            }
                        </div>
                    }

                    @if (!snapshot.isFailed) {
                        <span inline="false" (load)="scrollIntoView()" optional="false" [sqxMarkdown]="snapshot.content"></span>
                    }

                    @if (snapshot.isFailed) {
                        <span> {{ "chat.failed" | sqxTranslate }} </span>
                    }

                    @if (!snapshot.isRunning && !isFirst && type === "Bot") {
                        <button class="btn btn-secondary btn-sm btn-text" (click)="selectContent()" [disabled]="snapshot.isCopying" type="button">
                            {{ "chat.use" | sqxTranslate }}
                            @if (snapshot.isCopying) {
                                <sqx-loader />
                            }
                        </button>
                    }
                </div>

                @if (snapshot.isRunning) {
                    <svg class="loader" height="10" viewBox="0 0 40 16">
                        <circle class="dot" cx="8" cy="8" r="4" />

                        <circle class="dot" cx="20" cy="8" r="4" />

                        <circle class="dot" cx="32" cy="8" r="4" />
                    </svg>
                }
            </div>
        </div>
    </div>
}

<div #focusElement></div>
